
<script src="../../js/validation.js"></script>
<div class="contents">
    <h2>Add User</h2>
    <div class="signup">
        <form name="form" action="/JudiBlog/usermanage?action=addnew" method="Post" onsubmit="return agree();">
            <div id="errorBox">
                <label id="loi"></label>
            </div>
            <div id="username">
                <label>User name</label>
                <input type="text" name="userName" placeholder="User Name" class="input_username" onblur="Username()()"/>
            </div>
            <div id="password_form">
                <label >Password</label>
                <div>
                    <input type="password" name="pwd" placeholder="New Password" class="input_password" onblur="Password()"/>
                    <input type="password" name="re_pwd" placeholder="Re-enter Password" class="input_password" onblur="Confim_password()"/>
                </div>
            </div>
            <div id="fullname">
                <label >Full name</label>
                <input type="text" name="fullName" value="" placeholder="Full Name"  class="input_name" onblur="Fullname()"/>
            </div>
            <!--birthday details start-->
            <div id="birthday">
                <label >Birthday</label>
                <div>
                    <select name="birthday_day" >
                        <option value="" selected>Day</option>
                        <c:forEach var="i" begin="1" end="31" step="1">
                            <option value="${i}">${i}</option>
                        </c:forEach>
                    </select>
                    &nbsp;
                    <select name="birthday_month" >
                        <option value="" selected >Month</option>
                        <c:forEach var="i" begin="1" end="12" step="1">
                            <option value="${i}">${i}</option>
                        </c:forEach>
                    </select>
                    &nbsp;
                    <select name="birthday_year">
                        <option value="" selected>Year</option>
                        <%@page import="java.util.Calendar"%>
                        <%@page import="java.util.GregorianCalendar"%>
                        <%
                            GregorianCalendar cal = new GregorianCalendar();
                            int year = cal.get(Calendar.YEAR);
                            for (int i = year; i >= year - 110; i--) {
                                out.print("<option value='" + i + "'>" + i + "</option>");
                            }
                        %>
                    </select>
                </div>

            </div>
            <!--birthday details ends-->
            <div id="role">
                <label>Role:</label>
                <select name="role">
                    <option value="1" selected>Administrator</option>
                    <option value="2" >SuperModerator</option>
                    <option value="3" >Moderator</option>
                    <option value="4" >Member</option>
                </select>
            </div>
            <div id="radio_button">
                <div>
                    <input type="radio" name="gender" value="male" checked/>
                    <label class="gender">Male</label>
                    <input type="radio" name="gender" value="female"/>
                    <label class="gender">Female</label>
                </div>
            </div>
            <div id="idcard">
                <label >ID Card</label>
                <input type="text" name="idCard" value="" placeholder="Your ID Card" class="input_idcard" onblur="Idcard()"/>
            </div>
            <div id="address">
                <label >Address</label>
                <input type="text" name="address" value="" placeholder="Your Address" class="input_adress" onblur="Address()"/>
            </div>
            <div id="email">
                <label >Email</label>
                <input type="text" name="email" value="" placeholder="Your Email" class="input_email" onblur="Email()"/>
            </div>
            <div id="phone">
                <label>Phone</label>
                <input type="text" name="phone" value="" placeholder="Your Phone" class="input_phone" onblur="Phone()"/>
            </div>
            <div id="submit">
                <input type="submit" value="Add new" class="input_submit" onsubmit=false/>
                <input type="reset" value="Reset" class="input_submit"/>
            </div>
        </form>
    </div>
</div>